<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/common/tag.jsp"%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>FlexiGrid</title>
		<link rel="stylesheet"
			href="${ctx}/js/flexigrid_my/css/flexigrid_blue.css" type="text/css"></link>
		<link href="${ctx }/ui/frame/main.css" rel="stylesheet"
			type="text/css" />
		<script type="text/javascript">
(function($){
        $(document).ready(function(){
          var maiheight = document.documentElement.clientHeight;
	var w = $("#ptable").width() - 3;
	var gapTop =  30;
	var otherpm = 90; //GridHead，toolbar，footer,gridmargin
	var h = maiheight - gapTop - otherpm-157;

var grid=$("#user").flexigrid({
		width: w,
		height: h,
		url: encodeURI('${ctx}/login/login.do?method=queryList'),
		dataType: 'json',
		colModel : [
		//	{display: '<input type="checkbox" id="checkAll"/>', name : 'check', width : 50, sortable : false, align: 'center',hide: false},
			{display: '编号', name : 'id', width : "10%", sortable : true, align: 'center',hide: false},
			{display: '用户名称', name : 'username', width : "15%", sortable : true, align: 'center'},
			{display: '用户密码', name : 'password', width : "15%", sortable : true, align: 'center'},
			{display: '用户邮箱', name : 'email', width : "15%", sortable : true, align: 'center'},
			{display: '手机号码', name : 'modelphone', width : "15%", sortable : true, align: 'center'},
			{display: '性别',     name : 'sex',width : "10%", sortable : true, align: 'center'},
			{display: '年龄',     name : 'age',width : "10%", sortable : true, align: 'center'}, 
			{display: '操作',     name : '', width : "10%",   sortable : true,align : 'center',process:opt}
			],
		buttons : [
			{name: '添加', bclass: 'input', onpress : toolbar},
			{name: '删除', bclass: 'delete', onpress : toolbar},
			{name: '修改', bclass: 'modify', onpress : toolbar},	
			{name: '导出EXCEL',bclass: 'edit',onpress : action},	
			{separator: true}
			],
		errormsg: '发生异常',
		sortname: "id",
		sortorder: "desc",
		usepager: true,
		title: '信息发布管理',
		pagestat: '显示记录从{from}到{to}，总数 {total} 条',
		useRp: true,
		rp: 10,
		rpOptions: [5,10, 15, 20, 30, 40, 100], //可选择设定的每页结果数
		nomsg: '没有符合条件的记录存在',
		minColToggle: 1, //允许显示的最小列数
		showTableToggleBtn: true,
		//autoload: true, //自动加载，即第一次发起ajax请求
		resizable: false, //table是否可伸缩
		procmsg: '加载中, 请稍等 ...',
		//hideOnSubmit: true, //是否在回调时显示遮盖
		//blockOpacity: 0.5,//透明度设置
		rowbinddata: true,
		showcheckbox: true,
		rowId : 'id',
		resizable : false,
		colresize:false
		//gridClass: "bbit-grid"//样式
	});
	
	//$('.trSelected',grid).parent().removeClass("trSelected");
	
	function toolbar(com,grid){
		if (com=='删除'){
			${"action"}.value="delete";
			if($('.trSelected',grid).length==0){
				alert("请选择要删除的数据");
			}else{
				if(confirm('是否删除这 ' + $('.trSelected',grid).length + ' 条记录吗?')){
					 var  ids ="";
				     for(var i=0;i<$('.trSelected',grid).length;i++){
				        ids+=","+$('.trSelected',grid).find("td:first").eq(i).text();//获取id
				      }
				      ids=ids.substring(1);
				        $.ajax({
			        url : '${ctx}/login/login.do?method=delete&ids='+ids,
			        type : 'POST',
			        dataType : 'html',
			        success : function() {
			        	alert("${successful}");
				        $('#user').flexReload();//表格重载
			        }
		        });
		      	}
		   }
		}else if (com=='添加'){
			window.location.href="${ctx}/login/login.do?method=input";
		}else if (com=='修改'){
			${"action"}.value="modify";
			if($(".trSelected").length==1){
				alert("flexGridServlet.do?action="+${"action"}.value+"&id="+$('.trSelected',grid).find("td").eq(0).text());
				window.location.href="flexGridServlet.do?action="+${"action"}.value+"&id="+$('.trSelected',grid).find("td").eq(0).text();
				
			}else if($(".trSelected").length>1){
				alert("请选择一个修改,不能同时修改多个");
			}else if($(".trSelected").length==0){
				alert("请选择一个您要修改的记录")
			}
			 
			//$("#user").flexReload({});
		}
	}
	function formatMoney(value, pid) {
         return "￥" + parseFloat(value).toFixed(2);
    }
        });
    })(jQuery);

function reset(){
	$("#username").val("");
	$("#sex").val("");
}

function doquery(){
	var username=$("#username").val();
	var sex=$("#sex").val();
	 var params = [{//注意格式   
          name : 'username',   
          value : username   
      }, {   
          name : 'sex',   
          value : sex   
      }];  
    $('#flex1').flexOptions({//重置表格的某些参数   
          page : 1,//设置起始页   
          params : params//设置查询参数   
      }).flexReload();//reload 
}

function opt(value, pid){
return '<a href="#" onclick="getview('+pid+')" >查看</a> | <a href="#"  onclick="updateRole('+pid+')" >修改</a> | <a href="#" onclick="deleteRole('+pid+')" >删除</a>';
}
function getview(id){
	$(window.parent.document).find("div[name='roles']").addtabitem({ id: id, text:"查看角色信息", isactive: true, closeable: true, url: "${ctx}/role/role.do?method=info&id="+id });
}
function updateRole(id){
	$(window.parent.document).find("div[name='users']").addtabitem({ id: id, text:"修改用户信息", isactive: true, closeable: true, url: "${ctx}/login/login.do?method=input&id="+id });
}
function deleteRole(id){
    if(confirm('您确定要删除吗?')){
 	   $.ajax({
		   url:"${ctx}/login/login.do?method=delete&id="+id,
		   type:'POST',
		   dataType: "html",
	       success: function () {
           	  alert("${successful}");
        	  $('#user').flexReload();
		   } 
		});
    }
}
</script>
		<style>
.flexigrid div.fbutton .add {
	background: url(${ctx}/css/flexigrid/images/add.png) no-repeat center
		left;
}

.flexigrid div.fbutton .delete {
	background: url(${ctx}/css/flexigrid/images/close.png) no-repeat center
		left;
}

.flexigrid div.fbutton .modify {
	background: url(${ctx}/css/flexigrid/images/modify.png) no-repeat center
		left;
}
</style>
	</head>
	<body>
		<div class="tabHeader">
			<input name="submit" type="submit" class="serchBtnSmall"
				id="btnDisplay" value="隐藏查询" onclick="changeDisplay()" />
		</div>
		<div class="tableNav" id="display">
			<div class="lbNav">
				<span class="icoSpan">查询条件</span>
			</div>
			<table class="tableForm">
				<tr>
					<th>
						用户名称：
					</th>
					<td>
						<input name="username" type="text" id="username" />
					</td>

					<th>
						性别：
					</th>
					<td>
						<select name="sex" id="sex" class="selectBig">
							<option value="">
								请选择
							</option>
							<option value="男">
								男
							</option>
							<option value="女">
								女
							</option>

						</select>
					</td>
				</tr>
				<tr>
					<td colspan="4" class="center">
						&nbsp;
						<input type="button" value="查询" onclick="doquery();return false;"
							class="btnSmall" />
						&nbsp;&nbsp;&nbsp;
						<input type="button" value="重 置" onclick="reset();return false;"
							class="btnSmall" />
					</td>
				</tr>
			</table>
		</div>
		<div id="ptable" style="margin: 10px">
			<table id="user" style="display: none"></table>
		</div>
		<input id="action" type="hidden" name="action" value="null" />
	</body>
</html>